<template>

  <div style="padding: 20px">
    <el-card v-if="isShow === 0">
      <!-- ==============================查询区域=======开始====================== -->
      <el-row type="flex" justify="end">
        <el-button @click="createPaper" type="primary" plain size="small"
          >创建试卷</el-button
        >
      </el-row>
      <br />
      <el-form ref="ruleForm" :inline="true" :model="queryData">
        <!-- 第一行 -->
        <el-row>
          <el-col id="zhulxcol" :span="6">
            <el-form-item label="试卷名称">
              <el-input
                size="small"
                v-model="queryData.paper_name"
                placeholder="请输入试卷名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col id="zhulxcol" :span="6">
            <el-form-item label="归属学科">
              <el-select
                clearable
                size="small"
                v-model="queryData.subject_id"
                placeholder="请选择归属学科"
                @change="selectSubjectId($event)"
              >
                <el-option
                  v-for="item in subjectData"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col id="zhulxcol" :span="6">
            <el-form-item label="归属目录">
              <el-select
                clearable
                size="small"
                v-model="queryData.directory_id"
                placeholder="请选择归属目录"
              >
                <el-option
                  v-for="item in subjectChild"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col id="zhulxcol" :span="6">
            <el-form-item label="试卷状态">
              <el-select
                clearable
                size="small"
                v-model="queryData.show_state"
                placeholder="请选择试卷状态"
              >
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="2"></el-option>
              </el-select> </el-form-item
          ></el-col>
          <!-- 第二行 -->
          <el-col id="zhulxcol" :span="6">
            <el-form-item label="试卷难度">
              <el-select
                clearable
                size="small"
                v-model="queryData.difficulty"
                placeholder="请选择试卷难度"
              >
                <el-option label="简单" value="1"></el-option>
                <el-option label="中等" value="2"></el-option>
                <el-option label="较难" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col id="zhulxcol" :span="6">
            <el-form-item label="试卷类型">
              <el-select
                clearable
                size="small"
                v-model="queryData.paper_type"
                placeholder="请选择试卷类型"
              >
                <el-option label="模拟卷" value="1"></el-option>
                <el-option label="真题卷" value="2"></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col id="zhulxcol" :span="6">
            <el-form-item label="创建时间">
              <el-date-picker
                size="small"
                v-model="queryData.create_time"
                type="daterange"
                style="width: 200px"
                range-separator="至"
                align="right"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                start-placeholder="开始"
                end-placeholder="结束"
              >
              </el-date-picker></el-form-item
          ></el-col>
          <el-col id="zhulxcol" :span="6">
            <el-form-item label="创建人">
              <el-input
                size="small"
                v-model="queryData.create_name"
                placeholder="请选择创建人"
              ></el-input> </el-form-item
          ></el-col>
        </el-row>
        <!-- 第三行 -->
        <el-row type="flex" justify="end">
          <el-form-item>
            <el-button size="small" type="primary" @click="onSubmit"
              >查询</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button size="small" @click="resetForm('queryData')"
              >重置</el-button
            >
          </el-form-item>
        </el-row>
      </el-form>
      <!-- ==============================查询区域=======结束====================== -->
      <!-- ==============================表格区域=======开始====================== -->
      <tablePaper
        @lookState="lookState"
        :tableData="tableData"
        @editState="editState"
      />
      <!-- ==============================表格区域=======结束====================== -->
      <br />
      <!-- ==============================分页组件=======开始====================== -->
      <PaginationPaper :PaginationInfo="PaginationInfo" @skipPage="skipPage" />
      <!-- ==============================分页组件=======结束====================== -->
    </el-card>
    <!-- 新增试卷组件 -->
    <addPaperInfo
      ref="addPaperInfoRef"
      v-else-if="isShow === 1"
      @okState="okState"
      :isShow="isShow"
      :editpaperInfoData="editpaperInfoData"
      :subjectData="subjectData"
      :zhulx="zhulx"
      :id="id"
      @update="isShow = 0"
    />
    <!-- 查看组件 -->
    <lookPaperApi
      v-else-if="isShow === 3"
      @backList="backList"
      :paperInfoData="paperInfoData"
    />
  </div>
</template>
<script>
import lookPaperApi from "./modules/lookPaperInfo.vue";
// import { changeStateApi,  } from "@/api/paperInfo";
// 分页组件
import PaginationPaper from "./modules/PaginationPaper.vue";
// 表格组件
import tablePaper from "./modules/tablePaper.vue";
import addPaperInfo from "./modules/addPaperInfo.vue";
import {
  subjectListApi,
  paperInfoListApi,
  lookZhuPaperApi,
} from "@/api/paperInfo.js";
export default {
  name: "paperInfo",
  data() {
    return {
      // 请求参数
      queryData: {
        page: 1,
        limit: 5,
        subject_id: "",
        directory_id: "",
        paper_name: "",
        difficulty: "",
        show_state: "",
        paper_type: "",
        create_name: "",
        create_time: "",
      },
      paperInfoData: {},
      fedbackQueryData: {},
      // 表格数据
      tableData: {},
      // 所属学科列表数据
      subjectData: [],
      // 归属学科的子集 归属目录
      subjectChild: [],
      // 是否显示新增组件
      isShow: 0,
      editpaperInfoData: {},
      // 分页数据信息
      PaginationInfo: {},
      zhulx: true,
      id: 0,
    };
  },
  components: { addPaperInfo, tablePaper, PaginationPaper, lookPaperApi },
  async created() {
    // 获取表格数据
    this.initData();
    // 获取所属学科数据
    this.subjectData = await subjectListApi();
  },
  methods: {
    // 查询  === 模糊匹配
    onSubmit() {
      this.queryData.page = 1;
      this.queryData.limit = 10;
      // 处理时间选择器的数据格式  NAN 不影响请求数据
      const t1 = new Date(this.queryData.create_time[0]).getTime();
      const t2 = new Date(this.queryData.create_time[1]).getTime();
      this.queryData.create_time = `${t1},${t2}`;
      this.initData();
    },
    // 重置  && 重新发送请求数据 使用 this.$options.data.call(this).queryData 获取初始值
    resetForm() {
      this.queryData = this.$options.data.call(this).queryData;
      this.initData();
    },
    // 获取列表数据 & 所属学科的信息
    async initData() {
      try {
        this.tableData = await paperInfoListApi(this.queryData);
      } catch (error) {
        return console.log(error);
      }
      this.PaginationInfo = {
        page: this.queryData.page,
        limit: this.queryData.limit,
        total: this.tableData.total,
      };
    },
    // 所属学科 && 归属目录 联动
    selectSubjectId(id) {
      const obj = this.subjectData.filter((item) => {
        return item.id === id;
      });
      this.subjectChild = obj[0].children;
    },
    handleClick(data) {
      this.isShow = 2;
    },
    // 分页 换页函数
    skipPage(str, val) {
      str === "page"
        ? (this.queryData.page = val)
        : (this.queryData.limit = val);
      this.initData();
    },
    // 查看
    async lookState(id) {
      this.paperInfoData = await lookZhuPaperApi(id);
      this.isShow = 3;
    },
    backList() {
      this.isShow = 0;
    },
    // 修改
    async editState(id) {
      this.id = id;
      this.editpaperInfoData = await lookZhuPaperApi(id);
      //   console.log(this.editpaperInfoData);
      this.zhulx = true;
      this.isShow = 1;
    },
    okState() {
      this.initData();
      this.isShow = 0;
    },
    createPaper() {
      this.zhulx = false;
      this.isShow = 1;
    },
  },
};
</script>

<style scoped>
#zhulxcol {
  height: 50px;
}
</style>

